<template>
  <div class="global-container" v-loading="loading">
    <div class="form-main">
      <el-divider>资质分类</el-divider>
      <div class="form-line">
        <div class="text1">岩土工程类质量检测：</div>
        <div class="text2">乙级证书编号</div>
        <div class="text3">水质检资字第</div>
        <div class="code"> {{ formData.ytCode || '' }} </div>
        <div class="unit">号</div>
        <div class="text4">发证日期</div>
        <div class="time">{{ formData.ytFzTime || '' }}</div>
        <div class="text5">有效期</div>
        <div class="time">{{ formData.ytEndTime || '' }}</div>
        <el-button
          class="btn"
          type="primary"
          :disabled="!formData.ytCode"
          @click="download('ytFile')"
          >下载证书</el-button>
      </div>
      <div class="form-line">
        <div class="text1">混凝土工程类质量检测：</div>
        <div class="text2">乙级证书编号</div>
        <div class="text3">水质检资字第</div>
        <div class="code"> {{ formData.hltCode || '' }} </div>
        <div class="unit">号</div>
        <div class="text4">发证日期</div>
        <div class="time">{{ formData.hltFzTime || '' }}</div>
        <div class="text5">有效期</div>
        <div class="time">{{ formData.hltEndTime || '' }}</div>
        <el-button
          class="btn"
          type="primary"
          :disabled="!formData.hltCode"
          @click="download('hltFile')"
          >下载证书</el-button>
      </div>
      <div class="form-line">
        <div class="text1">金属结构类质量检测：</div>
        <div class="text2">乙级证书编号</div>
        <div class="text3">水质检资字第</div>
        <div class="code"> {{ formData.jsjgCode || '' }} </div>
        <div class="unit">号</div>
        <div class="text4">发证日期</div>
        <div class="time">{{ formData.jsjgFzTime || '' }}</div>
        <div class="text5">有效期</div>
        <div class="time">{{ formData.jsjgEndTime || '' }}</div>
        <el-button
          class="btn"
          type="primary"
          :disabled="!formData.jsjgCode"
          @click="download('jsjgFile')"
          >下载证书</el-button>
      </div>
      <div class="form-line">
        <div class="text1">机械电气类质量检测：</div>
        <div class="text2">乙级证书编号</div>
        <div class="text3">水质检资字第</div>
        <div class="code"> {{ formData.jxdqCode || '' }} </div>
        <div class="unit">号</div>
        <div class="text4">发证日期</div>
        <div class="time">{{ formData.jxdqFzTime || '' }}</div>
        <div class="text5">有效期</div>
        <div class="time">{{ formData.jxdqEndTime || '' }}</div>
        <el-button
          class="btn"
          type="primary"
          :disabled="!formData.jxdqCode"
          @click="download('jxdqFile')"
          >下载证书</el-button>
      </div>
      <div class="form-line">
        <div class="text1">量测类质量检测：</div>
        <div class="text2">乙级证书编号</div>
        <div class="text3">水质检资字第</div>
        <div class="code"> {{ formData.lcCode || '' }} </div>
        <div class="unit">号</div>
        <div class="text4">发证日期</div>
        <div class="time">{{ formData.lcFzTime || '' }}</div>
        <div class="text5">有效期</div>
        <div class="time">{{ formData.lcEndTime || '' }}</div>
        <el-button
          class="btn"
          type="primary"
          :disabled="!formData.lcCode"
          @click="download('lcFile')"
          >下载证书</el-button>
      </div>
    </div>
    <!-- <el-button type="primary" @click="submitForm">提交修改</el-button> -->
  </div>
</template>
<script>
import userApi from '@/api/user';
import { decrypt } from '@/utils/sms4util';

export default {
  components: {
  },
  data() {
    return {
      formData: {},
      loading: false,
    };
  },
  computed: {
    userId() {
      return this.$store.state.user.userInfo.id;
    },
    userType() {
      return this.$store.state.user.userInfo.userType;
    },
    // 证件类型
    paperCodeLabel() {
      let paperType = this.$store.state.user.userInfo.paperType;
      const obj = {
        111: '身份证',
        '001': '社会保障号',
        516: '港澳居民来往大陆通行证编号',
        511: '台湾居民来往大陆通行证编号',
        414: '普通护照编号',
        411: '外国人永久居留证或永久居留许可编号',
      };
      return obj[paperType];
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let params = {
        id: this.userId,
        type: this.userType,
      };
      // 获取用户信息
      this.loading = true;
      const res = await userApi.getUserInfo(params);
      this.loading = false;
      this.formData = {
        ...this.formData,
        ...res.sysUnitQua,
        ytFile: res.geoCert?.fileUri,
        hltFile: res.conCert?.fileUri,
        jsjgFile: res.struCert?.fileUri,
        jxdqFile: res.elecCert?.fileUri,
        lcFile: res.measCert?.fileUri,
      };
      const userInfo = {
        ...res,
        unitTel: res.unitTel ? decrypt(res.unitTel) : '',
        creditCode: res.creditCode ? decrypt(res.creditCode) : '',
      };
      this.$store.commit('user/SET_USER_INFO', userInfo);
    },
    // 提交修改
    async submitForm() {
      let params = {
        ...this.formData,
      };
      await userApi.editCompanyQualifications(params);
      this.$message.success('修改成功');
    },
    // 下载证书
    async download(code) {
      window.open(this.formData[code]);
    }
  },
};
</script>
<style lang="scss" scoped>
.global-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-main {
  margin-top: 20px;
  margin-bottom: 30px;
  width: 1080px;
  .form-line {
    margin-top: 24px;
    width: 100%;
    display: flex;
    line-height: 40px;
    .text1 {
      width: 160px;
      text-align: right;
    }
    .text2 {
      margin: 0px 30px;
    }
    .text3 {
      margin-right: 5px;
    }
    .text4 {
      margin: 0px 20px;
    }
    .text5 {
      margin-left: 40px;
      margin-right: 20px;
    }
    .code {
      min-width: 105px;
    }
    .datePicker {
      width: 140px;
    }
    .btn {
      margin-left: 20px;
      height: 40px;
      width: 100px;
    }
    .time {
      width: 90px;
    }
  }
}
</style>
